<!DOCTYPE html>
<html>
<head>
	<title>账户明细</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no, maximum-scale=1.0"/>
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <link href="css/user.css" rel="stylesheet">
    <script src="js/jquery-2.1.4.min.js"></script>
    <style>
		body{
			background-color:#F3F3F3;
		}	
	</style>
</head>
<body>
	<header class="header">
    	<a href="user-index.html">
    	<div class="header-left">
            <img src="images/back.png" class="back">
            <span class="back-name">我</span>
        </div>
        </a>
        <span class="name">账户明细</span>
        <div class="header-right">
        	<a href="index.html">
        	<img src="images/home.png" class="edit">
            </a>
        </div>
    </header>
    
    <div class="account-main">
    	<ul>
        	<li><span class="account-main-fl">支出</span></li>
            <li><span class="account-main-fl select">充入</span></li>
        </ul>
        <div class="clear"></div>
    </div>
    
    <!--支出-->
    <div class="account-page" style="display:none;">
    	<ul class="account-out">
        	<li>
            	<div class="left">
                    <span class="account-goods">神奇的摩托车</span><br />
                    <span class="page-left gray">2016-06-07 10:00</span>
                </div>
                <div class="right">
                	<span class="page-right">-10元</span>
                </div>
            </li>
            <li>
            	<div class="left">
                    <span class="account-goods">神奇的摩托车</span><br />
                    <span class="page-left gray">2016-06-07 10:00</span>
                </div>
                <div class="right">
                	<span class="page-right">-10元</span>
                </div>
            </li>
            <li>
            	<div class="left">
                    <span class="account-goods">神奇的摩托车</span><br />
                    <span class="page-left gray">2016-06-07 10:00</span>
                </div>
                <div class="right">
                	<span class="page-right">-10元</span>
                </div>
            </li>
            <li>
            	<div class="left">
                    <span class="account-goods">神奇的摩托车</span><br />
                    <span class="page-left gray">2016-06-07 10:00</span>
                </div>
                <div class="right">
                	<span class="page-right">-10元</span>
                </div>
            </li>
        </ul>
    </div>
    
    <!--充入-->
    <div class="account-page">
    	<ul class="account-in">
        	<li>
            	<span class="page-left">2016-06-07 10:00</span>
                <span class="page-right">+10元</span>
            </li>
            <li>
            	<span class="page-left">2016-06-07 10:00</span>
                <span class="page-right">+10元</span>
            </li>
            <li>
            	<span class="page-left">2016-06-07 10:00</span>
                <span class="page-right">+10元</span>
            </li>
            <li>
            	<span class="page-left">2016-06-07 10:00</span>
                <span class="page-right">+10元</span>
            </li>
            <li>
            	<span class="page-left">2016-06-07 10:00</span>
                <span class="page-right">+10元</span>
            </li>
            <li>
            	<span class="page-left">2016-06-07 10:00</span>
                <span class="page-right">+10元</span>
            </li>
            <li>
            	<span class="page-left">2016-06-07 10:00</span>
                <span class="page-right">+10元</span>
            </li>
            <li>
            	<span class="page-left">2016-06-07 10:00</span>
                <span class="page-right">+10元</span>
            </li>
        </ul>
    </div>
<script>
	$(document).ready(function(e) {
        $(".account-main ul li").click(function(){
			$(".account-main-fl").removeClass("select");
			var sw=$(".account-main ul li").index(this);
			$(".account-main ul li").eq(sw).children("span").addClass("select");
			$(".account-page").eq(sw).show().siblings(".account-page").hide();
		})
    });
</script>
</body>
</html>
